<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" >
            <el-form-item label="发起人节点" prop="initNode">
                <el-input
                    v-model="queryParams.initNode"
                    placeholder="请输入发起人节点"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="发起人联系电话" prop="initSerialnum">
                <el-input
                    v-model="queryParams.initSerialnum"
                    placeholder="请输入发起人联系电话"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="下一步流程节点  0发起人 1主管 2副总 G 结束" prop="nodeTag">
                <el-input
                    v-model="queryParams.nodeTag"
                    placeholder="请输入下一步流程节点  0发起人 1主管 2副总 G 结束"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
                    v-hasPermi="['wodemand:SHEETINFO:add']"
                >新增
                </el-button>
            </el-col>
<!--            <el-col :span="1.5">-->
<!--                <el-button-->
<!--                    type="success"-->
<!--                    icon="el-icon-edit"-->
<!--                    size="mini"-->
<!--                    :disabled="single"-->
<!--                    @click="handleUpdate"-->
<!--                    v-hasPermi="['wodemand:SHEETINFO:edit']"-->
<!--                >修改-->
<!--                </el-button>-->
<!--            </el-col>-->
<!--            <el-col :span="1.5">-->
<!--                <el-button-->
<!--                    type="danger"-->
<!--                    icon="el-icon-delete"-->
<!--                    size="mini"-->
<!--                    :disabled="multiple"-->
<!--                    @click="handleDelete"-->
<!--                    v-hasPermi="['wodemand:SHEETINFO:remove']"-->
<!--                >删除-->
<!--                </el-button>-->
<!--            </el-col>-->
<!--            <el-col :span="1.5">-->
<!--                <el-button-->
<!--                    type="warning"-->
<!--                    icon="el-icon-download"-->
<!--                    size="mini"-->
<!--                    @click="handleExport"-->
<!--                    v-hasPermi="['wodemand:SHEETINFO:export']"-->
<!--                >导出-->
<!--                </el-button>-->
<!--            </el-col>-->
        </el-row>

        <el-table v-loading="loading" :data="SHEETINFOList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column label="工单编号" align="center" prop="sheetId"/>
            <el-table-column label="工单类型ID" align="center" prop="sheetTypeId"/>
<!--            <el-table-column label="发起人节点" align="center" prop="initNode"/>-->
<!--            <el-table-column label="发起人工号" align="center" prop="initStaffId"/>-->
            <el-table-column label="发起人姓名" align="center" prop="initStaffName"/>
            <el-table-column label="发起人联系电话" align="center" prop="initSerialnum"/>
            <el-table-column label="工单标题" align="center" prop="sheetTitle"/>
            <el-table-column label="工单描述" align="center" prop="sheetDesc"/>
            <el-table-column label="条件列表" align="center" prop="sheetCondition"/>
            <el-table-column label="下一步流程节点  0发起人 1主管 2副总 G 结束" align="center" prop="nodeTag"/>
            <el-table-column label="提交时间" align="center" prop="commitTime"/>
<!--            <el-table-column label="预留字段" align="center" prop="reserved1"/>-->
<!--            <el-table-column label="预留字段" align="center" prop="reserved2"/>-->
<!--            <el-table-column label="预留字段" align="center" prop="reserved3"/>-->
<!--            <el-table-column label="预留字段" align="center" prop="reserved4"/>-->
<!--            <el-table-column label="预留字段" align="center" prop="reserved5"/>-->
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleDetail(scope.row)"
                        v-hasPermi="['wodemand:SHEETINFO:edit']"
                    >审核
                    </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleUpdate(scope.row)"
                        v-hasPermi="['wodemand:SHEETINFO:edit']"
                    >修改
                    </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.row)"
                        v-hasPermi="['wodemand:SHEETINFO:remove']"
                    >删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

<!--        &lt;!&ndash; 添加或修改工单对话框 &ndash;&gt;-->
<!--        <el-dialog :title="title" :visible.sync="open" width="500px">-->
<!--            <el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
<!--                <el-form-item label="工单类型ID" prop="sheetTypeId">-->
<!--                    <el-input v-model="form.sheetTypeId" type="textarea" placeholder="请输入内容"/>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="发起人节点" prop="initNode">-->
<!--                    <el-input v-model="form.initNode" placeholder="请输入发起人节点"/>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="发起人工号" prop="initStaffId">-->
<!--                    <el-input v-model="form.initStaffId" type="textarea" placeholder="请输入内容"/>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="发起人姓名" prop="initStaffName">-->
<!--                    <el-input v-model="form.initStaffName" type="textarea" placeholder="请输入内容"/>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="发起人联系电话" prop="initSerialnum">-->
<!--                    <el-input v-model="form.initSerialnum" placeholder="请输入发起人联系电话"/>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="工单标题" prop="sheetTitle">-->
<!--                    <el-input v-model="form.sheetTitle" type="textarea" placeholder="请输入内容"/>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="工单描述" prop="sheetDesc">-->
<!--                    <el-input v-model="form.sheetDesc" type="textarea" placeholder="请输入内容"/>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="条件列表" prop="sheetCondition">-->
<!--                    <el-input v-model="form.sheetCondition" type="textarea" placeholder="请输入内容"/>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="下一步流程节点  0发起人 1主管 2副总 G 结束" prop="nodeTag">-->
<!--                    <el-input v-model="form.nodeTag" placeholder="请输入下一步流程节点  0发起人 1主管 2副总 G 结束"/>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="提交时间" prop="commitTime">-->
<!--                    <el-input v-model="form.commitTime" type="textarea" placeholder="请输入内容"/>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="预留字段" prop="reserved1">-->
<!--                    <el-input v-model="form.reserved1" type="textarea" placeholder="请输入内容"/>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="预留字段" prop="reserved2">-->
<!--                    <el-input v-model="form.reserved2" type="textarea" placeholder="请输入内容"/>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="预留字段" prop="reserved3">-->
<!--                    <el-input v-model="form.reserved3" type="textarea" placeholder="请输入内容"/>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="预留字段" prop="reserved4">-->
<!--                    <el-input v-model="form.reserved4" type="textarea" placeholder="请输入内容"/>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="预留字段" prop="reserved5">-->
<!--                    <el-input v-model="form.reserved5" type="textarea" placeholder="请输入内容"/>-->
<!--                </el-form-item>-->
<!--            </el-form>-->
<!--            <div slot="footer" class="dialog-footer">-->
<!--                <el-button type="primary" @click="submitForm">确 定</el-button>-->
<!--                <el-button @click="cancel">取 消</el-button>-->
<!--            </div>-->
<!--        </el-dialog>-->

        <!-- 添加或修改工单对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="80%">
            <div style="padding: 12px 25px 0 25px">
                <div>
                    <div class="base-info-header">基本信息</div>
                    <div class="base-info-form">
                        <el-row :gutter="15">
                            <el-form ref="form" :model="form" :rules="rules" size="medium" label-width="100px">
                              <el-col :span="24">
                              <el-form-item label="工单类型" prop="sheetType"  >
                                <el-select v-model="form.sheetTypeId" style="width: 100%" placeholder="请选择" :disabled="formDisable">
                                  <el-option
                                    v-for="item in sheetTypes"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    <span style="float: left">{{ item.label }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                                  </el-option>
                                </el-select>
                              </el-form-item>
                              </el-col>
                                <el-col :span="24">
                                    <el-form-item label="标题" prop="sheetTitle">
                                        <el-input v-model="form.sheetTitle" placeholder="请输入标题" clearable :style="{width: '100%'}" :disabled="formDisable"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="拟稿人" prop="initStaffName">
                                        <el-input v-model="form.initStaffName" :disabled="true" :style="{width: '100%'}" >
                                        </el-input>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="12">
                                    <el-form-item label="拟稿时间" prop="commitTime">
                                        <el-input v-model="form.commitTime" :disabled="true" :style="{width: '100%'}" >
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="联系电话" prop="initSerialnum">
                                        <el-input v-model="form.initSerialnum" placeholder="请输入联系电话" clearable
                                                  :style="{width: '100%'}" :disabled="formDisable">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                              <el-col :span="24">
                                <el-form-item label="需求条件" prop="sheetCondition">
                                  <el-checkbox-group size="medium" v-model="form.sheetCondition" :disabled="formDisable">
                                    <el-checkbox v-for="(item, index) in conditionList" :key="index" :label="item">
                                      {{item}}
                                    </el-checkbox>
                                  </el-checkbox-group>
                                </el-form-item>
                              </el-col>
                                <el-col :span="24">
                                    <el-form-item label="工单描述" prop="sheetDesc">
                                        <el-input v-model="form.sheetDesc" type="textarea" placeholder="请输入工单描述"
                                                  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}" :disabled="formDisable"></el-input>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="24" v-if="this.formDisable">
                                    <el-form-item label="处理意见" prop="sheetDesc">
                                        <el-input v-model="form.dealRamark" type="textarea" placeholder="请输入处理意见"
                                                  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item size="large">
                                        <el-button v-if="this.formDisable" type="primary" @click="submitDealForm" :loading="loading">通 过</el-button>
                                        <el-button  v-if="this.formDisable" type="primary" @click="submitDealFaildForm" :loading="loading">拒 绝</el-button>
                                        <el-button  v-if="!this.formDisable" type="primary" @click="submitForm" :loading="loading">提交</el-button>
                                        <el-button @click="resetForm">重置</el-button>
                                    </el-form-item>
                                </el-col>
                            </el-form>
                        </el-row>
                    </div>
                </div>


                <el-collapse class="collapse-grid" value="1">
                    <el-collapse-item name="1">
                        <template slot="title">
                            <span class="collapse-grid-title">流程跟踪</span>
                        </template>
                        <div class="collapse-grid-content">
                            <el-table
                                :data="logList"
                                style="width: 100%"
                                >
                                <el-table-column
                                    prop="dealTime"
                                    label="处理时间"
                                    width="180">
                                </el-table-column>
                                <el-table-column
                                    prop="auditStaffName"
                                    label="处理人"
                                    width="180">
                                </el-table-column>
                                <el-table-column
                                    prop="dealRamark"
                                    label="处理意见">
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>

        </el-dialog>
    </div>
</template>

<script>
    import {
        addSHEETINFO,
        delSHEETINFO,
        exportSHEETINFO,
        getSHEETINFO,
        listSHEETINFO,
        updateSHEETINFO
    } from "@/api/wodemand/SHEETINFO";
    import { addSHEETDEAL, listSHEETDEAL } from "@/api/wodemand/SHEETDEAL";
    import {getSHEETTYPE} from "@/api/wodemand/SHEETTYPE";
    import { getSheetTypes } from "@/api/wodemand/SHEETNODE";
    import dayjs from "dayjs";
    export default {
        name: "SHEETINFO",
        data() {
            return {
                sheetTypes:[],
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 总条数
                total: 0,
                // 工单表格数据
                SHEETINFOList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 是否禁用详情弹出层修改
                formDisable: false,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    sheetTypeId: undefined,
                    initNode: undefined,
                    initStaffId: undefined,
                    initStaffName: undefined,
                    initSerialnum: undefined,
                    sheetTitle: undefined,
                    sheetDesc: undefined,
                    sheetCondition: undefined,
                    nodeTag: undefined,
                    commitTime: undefined,
                    reserved1: undefined,
                    reserved2: undefined,
                    reserved3: undefined,
                    reserved4: undefined,
                    reserved5: undefined
                },
                // 表单参数
                form: {
                    initStaffName: this.$store.state.user.name,
                    sheetCondition: [],
                    commitTime:dayjs().format("YYYY-MM-DD HH:mm:ss")
                },
                logForm: {
                    auditStaffName:this.$store.state.user.name,
                    dealTime:dayjs().format("YYYY-MM-DD HH:mm:ss")
                },
                // 表单校验
                rules: {},
                conditionList:[],
                logList:[]
            };
        },
        created() {
            this.getList();
            this.$store.dispatch("GetInfo");
            this.getTypeList();
            this.getSheetTypeSV();
        },
        methods: {
            /** 查询工单列表 */
            getList() {
                this.loading = true;
                listSHEETINFO(this.queryParams).then(response => {
                    this.SHEETINFOList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            getSheetTypeSV() {
                getSheetTypes().then(response => {
                    this.sheetTypes = response.data;
                })
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    initStaffName: this.$store.state.user.name,
                    sheetCondition: [],
                    commitTime:dayjs().format("YYYY-MM-DD HH:mm:ss"),
                    sheetId: undefined,
                    sheetTypeId: undefined,
                    initNode: undefined,
                    initStaffId: undefined,
                    initSerialnum: undefined,
                    sheetTitle: undefined,
                    sheetDesc: undefined,
                    nodeTag: undefined,
                    reserved1: undefined,
                    reserved2: undefined,
                    reserved3: undefined,
                    reserved4: undefined,
                    reserved5: undefined,
                    dealRamark:undefined
                };
                this.logList = [];
                this.resetForm("form");
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.sheetId)
                this.single = selection.length != 1
                this.multiple = !selection.length
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.title = "添加工单";
                this.formDisable = false;
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset();
                const sheetId = row.sheetId || this.ids
                getSHEETINFO(sheetId).then(response => {
                    this.form = response.data;
                    this.open = true;
                    this.title = "修改工单";
                });
            },
            handleDetail(row) {
                this.reset();
                const sheetId = row.sheetId || this.ids;
                getSHEETINFO(sheetId).then(response => {
                    this.form = response.data;
                    this.form.sheetCondition = response.data.sheetCondition && response.data.sheetCondition.split(";");
                    this.open = true;
                    this.formDisable = true;
                    this.title = "详情";
                    this.getLogList(sheetId);
                });
            },
            /** 提交按钮 */
            submitForm: function () {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        this.form.nodeTag = this.form.sheetCondition.length > 0?1:2;
                        var data = {...this.form};
                        data.sheetCondition = data.sheetCondition.join(";");

                        if (this.form.sheetId != undefined) {
                            updateSHEETINFO(data).then(response => {
                                if (response.code === 200) {
                                    this.msgSuccess("修改成功");
                                    this.open = false;
                                    this.getList();
                                } else {
                                    this.msgError(response.msg);
                                }
                            });
                        } else {
                            addSHEETINFO(data).then(response => {
                                if (response.code === 200) {
                                    this.msgSuccess("新增成功");
                                    this.open = false;
                                    this.getList();
                                } else {
                                    this.msgError(response.msg);
                                }
                            });
                        }
                    }
                });
            },
            submitDealForm(){
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        var data = {...this.form};
                        data.nodeTag = data.nodeTag == '1'?'G':'1';
                        console.log('sheetCondition:',data,this.form);
                        if( data.sheetCondition!=null){
                            data.sheetCondition = data.sheetCondition.join(";");
                        }

                        this.logForm.nodeTag = this.form.nodeTag;
                        this.logForm.dealRamark = this.form.dealRamark;
                        this.logForm.sheetId = this.form.sheetId;

                        if (this.logForm.sheetId != undefined) {
                            addSHEETDEAL(this.logForm).then(response => {
                                if (response.code === 200) {
                                    this.msgSuccess("审核通过");
                                    this.open = false;
                                } else {
                                    this.msgError(response.msg);
                                }
                            });
                            updateSHEETINFO(data);
                        }
                    }
                });
            },
            submitDealFaildForm(){
                var data = {...this.form};
                data.nodeTag = "0";

                this.logForm.nodeTag = this.form.nodeTag;
                this.logForm.dealRamark = this.form.dealRamark;
                this.logForm.sheetId = this.form.sheetId;

                if (this.logForm.sheetId != undefined) {
                    addSHEETDEAL(this.logForm).then(response => {
                        if (response.code === 200) {
                            this.msgSuccess("审核通过");
                            this.open = false;
                        } else {
                            this.msgError(response.msg);
                        }
                    });
                    updateSHEETINFO(data);
                    this.getList();
                }
                updateSHEETINFO(data).then(response => {
                    if (response.code === 200) {
                        this.msgSuccess("审核拒绝");
                        this.open = false;
                    } else {
                        this.msgError(response.msg);
                    }
                });
                this.getList();
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const sheetIds = row.sheetId || this.ids;
                this.$confirm('是否确认删除工单编号为"' + sheetIds + '"的数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return delSHEETINFO(sheetIds);
                }).then(() => {
                    this.getList();
                    this.msgSuccess("删除成功");
                }).catch(function () {
                });
            },
            /** 导出按钮操作 */
            handleExport() {
                const queryParams = this.queryParams;
                this.$confirm('是否确认导出所有工单数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return exportSHEETINFO(queryParams);
                }).then(response => {
                    this.download(response.msg);
                }).catch(function () {
                });
            },
            getTypeList() {
                // this.loading = true;
                // listSHEETTYPE(this.queryTypeParams).then(response => {
                //     this.SHEETTYPEList = response.rows;
                //     console.log(this.SHEETTYPEList);
                //     _this.field107Options.map(this.SHEETTYPEList);
                // });
                getSHEETTYPE("1").then(response => {
                    let conditionsList = response.data.conditionsList;
                    conditionsList = conditionsList.substring(0, conditionsList.lastIndexOf(";"));
                    this.conditionList = conditionsList.split(';');
                });
            },
            getLogList(sheetId) {
                // this.loading = true;
                var param = {
                    sheetId: sheetId,
                    pageSize:100
                };
                listSHEETDEAL(param).then(response => {
                    this.logList = response.rows;
                    console.log( response.rows,'%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%')
                    // this.loading = false;
                });
            },
        }
    };
</script>
<style>
    .base-info-header {
        height: 35px;
        line-height: 35px;
        width: 100%;
        background-color: #e4e4e4;
        padding-left: 12px;
    }

    .base-info-form {
        border: 1px solid #e4e4e4;
        padding: 20px 8px;
    }

    .collapse-grid {
        margin-top: 12px;
        border: 1px solid #e4e4e4;
    }

    .collapse-grid-title {
        margin-left: 8px;
        font-size: 16px;
        font-weight: 700;
        color: red;
    }

    .collapse-grid-content {
        margin: 0 8px;
    }
</style>
